<template>
	<div class="add_ad">
		<header>编辑广告位</header>
		<div class="form_contents">
			<div class="subject_name common">
				<p style="width:190px;">活动主题：</p>
				<el-input v-model.trim="input1" placeholder="请输入活动主题"></el-input>
			</div>
			<div class="upload_img common">
				<p>上传广告图片：</p>
				<div class="up_imgs">
					<img id="showImg" width="94" height="94" src="../../assets/images/market/upload.png" style="cursor:pointer;" alt="" @click.stop='autoClick' />
					<input type="file" @change="onFileChange" style="display:none;" id="upfile" @click.stop='autoClick'> </div>
			</div>
			<div class="show_ad common">
				<p>是否显示：</p>
				<div class="radios">
					<el-radio v-model="radio1" label="1">显示</el-radio>
					<el-radio v-model="radio1" label="0">隐藏</el-radio>
				</div>
			</div>
			<div class="ad_url common" style="display:none;">
				<p>图片地址：</p>
				<el-input v-model.trim="input2" placeholder="图片地址"></el-input>
			</div>
			<div class="sorts common">
				<p>顺序：</p>
				<el-input v-model.trim="input3"></el-input>
			</div>
			<div class="active_id common">
				<p>活动ID：</p>
				<el-input v-model.trim="input4"></el-input>
			</div>
			<div class="actions common">
				<p>Action：</p>
				<el-input v-model.trim="input5" placeholder="请输入内容"></el-input>
			</div>
			<div class="links common">
				<p>link：</p>
				<el-input v-model.trim="input6" placeholder="请输入链接"></el-input>
			</div>
			<div class="remark common">
				<p>备注：</p>
				<el-input type="textarea" v-model.trim="input7" placeholder="请输入该广告位的备注"></el-input>
			</div>
			<div class="buttons common">
				<el-button type="danger" style="background:#e7251a;" @click.native="submits">提交</el-button>
				<el-button style="margin-left:20px;" @click.native="cancels">取消</el-button>
			</div>
		</div>
	</div>
</template>
<script>
	import { setCookie, getCookie } from '@/assets/js/cookie'
	export default {
		name: 'edit_ad',
		data() {
			return {
				userID: '', //用户id
				input1: '', //活动主题
				imageUrl: '', //图片上传地址
				radio1: '1', //1-显示 0-隐藏
				input2: '', //图片地址
				input3: '', //顺序
				input4: '', //活动ID
				input5: '', //Action
				input6: '', //link
				input7: '', //备注
				imgU: '', //广告图片上传地址
			}
		},
		computed: {},
		created() {
			//离开页面提醒
        	window.onbeforeunload = function(e) {
                var e = window.event || e;
                e.returnValue = ("在新增或编辑时，关闭选项卡将导致数据无法保存");
            }
			this.userID = getCookie('userId');
			this.getDetail();
		},
		methods: {
			//广告详情
			getDetail(){
				this.$axiosPost('/4SCAFE/RegionAdvs/getAdvsById.action',{ADVS_ID:this.$route.params.id}).then(res => {
					//console.log(res);					
					this.input1 = res.SUBJECT;
					this.imgU = res.MEDIAPATH;
					this.radio1 = ''+res.ISSHOW;
					this.input3 = res.ORDERNUM;
					res.TARGETID ? this.input4 = res.TARGETID : null;
					res.ACTION ? this.input5 = res.ACTION : null;
					res.LINK ? this.input6 = res.LINK : null;
					res.REMARK ? this.input7 = res.REMARK : null;					
				})
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if(!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			//提交
			submits() {
				if(this.input1 == '') {
					this.$alert('请输入活动主题', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if(this.imgU[1] == '') {
					this.$alert('请上传图片', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				if(this.input3 == '') {
					this.$alert('请输入顺序', '提示', {
						confirmButtonText: '确定',
					});
					return;
				}
				let obj = {};
				obj.USER_ID = this.userID; //用户id
				obj.ADVS_ID = this.$route.params.id;//广告id 编辑专有
				obj.SUBJECT = this.input1; //活动主题
				obj.PHOTO = this.imgU; //上传广告图片
				obj.ISSHOW = this.radio1; //是否显示
				//obj.ACT_TYPE = this.value2;//图片地址
				obj.ORDERNUM = this.input3; //顺序
				obj.TARGETID = this.input4; //活动ID
				obj.ACTION = this.input5; //Action
				obj.LINK = this.input6; //link
				obj.REMARK = this.input7; //备注
				//console.log(obj);return;
				let flagss = true;
				if(flagss) {
					//编辑广告
					this.$axiosPost('/4SCAFE/RegionAdvs/saveAdvs.action', obj).then(res => {
						flagss = false;
						if(res.STATUS_CODE === 1) {
							flagss = true;
							this.$message({
								type: 'success',
								message: '修改成功'
							});
							setTimeout(() => this.$router.push({
								path: '/functions/advertisement'
							}), 1500);
						}
						//console.log(res);
					})
				}
			},
			//取消
			cancels() {
				this.$confirm('此操作将不会保存信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$router.push({
						path: '/functions/advertisement'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					});
				});
			},
			//自动点击
			autoClick() {
				document.getElementById("upfile").click();
			},
			//上传文件
			onFileChange($event) {
				//console.log($event);
				if($event.target.files.length == 0) {
					return;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				let that = this;
				let sImg = document.getElementById('showImg');
				fr.onload = function(evt) {
					//console.log(evt);					
					sImg.src = evt.target.result;
					that.imgU = evt.target.result.split(',')[1];
				}
				//console.log(that.imgU);
			},
		},
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.el-button {
		margin: 0 15px;
	}
	/* 上传样式start */
	
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 90px;
		height: 90px;
		line-height: 90px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
	}
	.avatar {
		width: 90px;
		height: 90px;
		display: block;
	}
	/* 上传样式end */
	
	.add_ad {
		header {
			background: #fff;
			font-size: 22px;
			font-weight: 700;
			padding: 20px;
		}
		.form_contents {
			padding-bottom: 40px;
			p {
				white-space: nowrap;
				width: 150px;
				text-align: right;
			}
			width:97%;
			margin:25px auto;
			background:#fff;
			padding-top:40px;
			.common {
				width: 50.8%;
				margin: 26px auto;
				display: flex;
				align-items: center;
			}
			.first_b, .second_b, .third_b {
				img {
					width: 22px;
					height: 22px;
					cursor: pointer;
					margin-left: 10px;
				}
			}
			.upload_img {
				align-items: flex-start;
				.up_imgs {
					display: flex;
				}
			}
			.ad_url, .sorts, .active_id, .actions, .links, .remark {
				width: 47.5%;
			}
			.buttons {
				width: 30%;
			}
		}
	}
</style>